<template>
<div class="photoinfo-container">
    <h3>{{ photoinfo.title }}</h3>
    <p class="subtitle">
        <span>发表时间：{{ nowtime | dateFormat }}</span>
        <span>点击：{{ photoinfo.click + 2 }}次</span>
    </p>

    <hr>

    <!-- 缩略图区域 -->
    <div class="thumbs">
        <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)" :key="item.src">
    </div>
    <!-- 图片内容区域 -->
    <div class="content" v-html="photoinfo.content"></div>

    <!-- 放置一个现成的 评论子组件 -->
    <cmt-box :id="id"></cmt-box>
</div>
</template>

<script>
    import {Toast} from "mint-ui";
    import comment from "../../views/comment/comment";
export default {
    data () {
        return {
            id: this.$route.params.id, // 从路由中获取到的 图片Id
            nowtime: new Date(),
            photoinfo: {}, // 图片详情
            list: [] // 缩略图的数组
        }
    },
    created() {
        this.getPhotoInfo();
        this.getThumbs();
    },
    methods: {
        async getPhotoInfo () {
            const { data: res } = await this.$http.get(`api/getimageInfo/${this.id}`)
            if (res.status !== 0) {
                return Toast('获取图片详情失败！')
            }
            else {
                this.photoinfo = res.message[0]
            }
        },
        async getThumbs () {
            const { data: res } = await this.$http.get(`api/getthumimages/${this.id}`)
            if (res.status !== 0) {
                return Toast('获取图片缩略图失败！')
            }
            else {
                // 要手动给获取的缩略图增加宽高，这是缩略图组件文档规定的
                res.message.forEach(item => {
                    item.width = 600;
                    item.height = 400;
                })
                this.list = res.message
            }
        }
    },
    components: {
        'cmt-box': comment
    }
}
</script>

<style lang="less" scoped>
    .photoinfo-container{
        padding: 3px;
        margin-bottom: 50px;
        h3{
            font-size: 15px;
            color: #26A2FF;
            text-align: center;
            margin: 15px 0;
        }
        .subtitle {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
        .content{
            font-size: 13px;
            line-height: 30px;
        }
        .thumbs{
            display: flex;
            justify-content: flex-start;
            flex-wrap: wrap;
            img{
                margin: 10px;
                box-shadow: 0 0 8px #999;
            }
        }
    }
</style>
